<template>
    <div class="addStore-container">
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/inStocks' }">物资管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/inStocks' }">物资入库</el-breadcrumb-item>
            <el-breadcrumb-item>添加入库</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-row :gutter="20">
            <!-- 左边卡片 -->
            <el-col :span="11">
                <el-card>
                    <!-- 1.步骤条 -->
                    <el-steps style="margin-bottom: 20px" :active="1" simple>
                        <el-step title="填写" icon="el-icon-edit"></el-step>
                        <el-step title="审核" icon="el-icon-postcard"></el-step>
                        <el-step title="入库" icon="el-icon-set-up"></el-step>
                    </el-steps>
                    <!-- 表单 -->
                    <el-form
                        size="mini"
                        ref="addStoreFormRef"
                        :rules="addRules"
                        :model="addStoreForm"
                        label-width="80px"
                    >
                        <el-form-item label="添加方式">
                            <el-col :span="24">
                                <el-radio
                                    border
                                    size="mini"
                                    @change="existenceChange(existence)"
                                    v-model="existence"
                                    :label="0"
                                    >新增来源</el-radio
                                >
                                <el-radio
                                    border
                                    size="mini"
                                    @change="existenceChange(existence)"
                                    v-model="existence"
                                    :label="1"
                                    >已知来源</el-radio
                                >
                            </el-col>
                        </el-form-item>
                        <el-form-item label="入库类型" prop="type">
                            <el-radio-group v-model="addStoreForm.type">
                                <el-radio :size="'mini'" :label="1">捐赠</el-radio>
                                <el-radio :size="'mini'" :label="2">下拨</el-radio>
                                <el-radio :size="'mini'" :label="3">采购</el-radio>
                                <el-radio :size="'mini'" :label="4">借用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 新增来源 -->
                        <div v-if="existence == 0">
                            <el-row>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple"></div>
                                    <el-form-item label="省份" prop="valueProvince">
                                        <el-select
                                            v-model="addStoreForm.valueProvince"
                                            placeholder="请选择省"
                                            @change="changeProvince"
                                        >
                                            <el-option
                                                v-for="item in provinceList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="城市" prop="valueCity">
                                            <el-select
                                                v-model="addStoreForm.valueCity"
                                                placeholder="请选择市"
                                                @change="changeCity"
                                            >
                                                <el-option
                                                    v-for="item in cityOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="区县" prop="valueOrigin">
                                            <el-select
                                                v-model="addStoreForm.valueOrigin"
                                                placeholder="请选择区"
                                                @change="changeOrigin"
                                            >
                                                <el-option
                                                    v-for="item in originOptions"
                                                    :key="item.label"
                                                    :label="item.label"
                                                    :value="item.value"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-form-item label="具体来源" prop="name">
                                <el-input placeholder="请输入具体来源" v-model="addStoreForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人" prop="contact">
                                <el-input placeholder="请输入联系人名称" v-model="addStoreForm.contact"></el-input>
                            </el-form-item>

                            <el-form-item label="邮箱" prop="email">
                                <el-input placeholder="请输入邮箱地址" v-model="addStoreForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input placeholder="请输入电话号码" v-model="addStoreForm.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="排序" prop="sort">
                                <el-input-number
                                    v-model="addStoreForm.sort"
                                    :min="1"
                                    :max="10"
                                    label="排序"
                                ></el-input-number>
                            </el-form-item>
                        </div>

                        <!-- 已知来源 -->
                        <div v-if="existence == 1">
                            <el-form-item label="物资来源" prop="supplierId">
                                <el-col :span="12">
                                    <div class="grid-content bg-purple">
                                        <el-select
                                            v-if="existence == 1"
                                            style="width: 100%"
                                            filterable
                                            @change="supplerSelectChange(addStoreForm.supplierId)"
                                            v-model="addStoreForm.supplierId"
                                            placeholder="选择已存在来源"
                                        >
                                            <el-option
                                                v-for="item in suppliers"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </div>
                                </el-col>
                            </el-form-item>
                            <el-card class="box-card" style="margin-bottom: 38px">
                                <div class="text item" style="font-size: 12px; padding: 5px">
                                    物资名称:
                                    <span style="margin-left: 200px; color: #999">
                                        <el-tag size="mini" type="info">{{ supplierInfo.name }}</el-tag>
                                    </span>
                                </div>
                                <div class="text item" style="font-size: 12px; padding: 5px">
                                    物资地址:
                                    <span style="margin-left: 200px; color: #999">
                                        <el-tag size="mini" type="info">{{ supplierInfo.address }} </el-tag></span
                                    >
                                </div>
                                <div class="text item" style="font-size: 12px; padding: 5px">
                                    联系方式:
                                    <span style="margin-left: 200px; color: #999">
                                        <el-tag size="mini" type="info">{{ supplierInfo.phone }} </el-tag></span
                                    >
                                </div>
                                <div class="text item" style="font-size: 12px; padding: 5px">
                                    电子邮件:
                                    <span style="margin-left: 200px; color: #999">
                                        <el-tag size="mini" type="info">{{ supplierInfo.email }} </el-tag></span
                                    >
                                </div>
                                <div class="text item" style="font-size: 12px; padding: 5px">
                                    联系人员:
                                    <span style="margin-left: 200px; color: #999">
                                        <el-tag size="mini" type="info">{{ supplierInfo.contact }} </el-tag></span
                                    >
                                </div>
                            </el-card>
                        </div>

                        <el-row>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="物资明细">
                                        <el-button size="mini" plain icon="el-icon-search" @click="drawer = true"
                                            >入库明细</el-button
                                        >
                                    </el-form-item>
                                </div>
                            </el-col>

                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="物资总类">
                                        <el-input-number v-model="itemNum" :disabled="true"></el-input-number>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>

                        <el-form-item label="描述信息" prop="remark">
                            <el-input type="textarea" :rows="2" v-model="addStoreForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="add">立即创建</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>

            <!-- 右边卡片区域 -->
            <el-col :span="13">
                <el-card>
                    <!-- 查询搜索 -->
                    <el-form :inline="true" :model="queryMap" class="demo-form-inline" size="small">
                        <el-form-item label="分类">
                            <el-cascader
                                :checkStrictly="true"
                                @change="selectChange"
                                v-model="categorykeys"
                                :props="selectProps"
                                :options="catetorys"
                                clearable
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item label="名称">
                            <el-input clearable v-model="queryMap.name" placeholder="名称" @clear="search"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 提示 -->
                    <el-alert
                        title="勾选先下方物资后,在左侧表单的明细中添加其入库数量"
                        type="info"
                        show-icon
                        :closable="false"
                        style="margin-bottom: 20px"
                    >
                    </el-alert>
                    <!-- 入库预选表格 -->
                    <el-table
                        style="height: 443px"
                        :data="tableData"
                        :row-key="getRowKey"
                        ref="dataTable"
                        @selection-change="handleSelectionChange"
                        border
                    >
                        <el-table-column type="selection" :reserve-selection="true"></el-table-column>
                        <el-table-column prop="imageUrl" label="图片" align="center" width="150px" padding="0px">
                            <template slot-scope="scope">
                                <!--  弹出框  -->
                                <el-popover placement="right" trigger="hover">
                                    <img
                                        :src="'服务器IP地址' + scope.row.imageUrl"
                                        style="height: 150px; width: 150px"
                                    />
                                    <img
                                        slot="reference"
                                        :src="'服务器IP地址' + scope.row.imageUrl"
                                        :alt="scope.row.imgUrl"
                                        style="height: 32px; width: 32px; cursor: pointer"
                                    />
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column prop="pnum" label="商品编号" :show-overflow-tooltip="true"></el-table-column>

                        <el-table-column prop="model" label="型号"></el-table-column>
                        <el-table-column prop="unit" label="单位"></el-table-column>
                    </el-table>
                    <!-- 表格分页 -->
                    <el-pagination
                        background
                        style="margin-top: 10px; margin-bottom: 20px; float: right"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryMap.pageNum"
                        :page-sizes="[6, 8, 16, 20]"
                        :page-size="queryMap.pageSize"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                    ></el-pagination>

                    <!-- 抽屉 -->
                    <el-drawer size="49%" title="入库明细" :visible.sync="drawer" :with-header="false">
                        <span>
                            <el-button
                                size="mini"
                                style="float: right; margin: 10px"
                                type="primary"
                                icon="el-icon-remove"
                                :disabled="products.length == 0"
                                @click="removeAllItem"
                            >
                                清空
                            </el-button>
                            <el-table height="700" :data="products" border>
                                <el-table-column prop="name" label="名称" width="120px;"></el-table-column>
                                <el-table-column
                                    prop="imageUrl"
                                    label="图片"
                                    align="center"
                                    width="150px"
                                    padding="0px"
                                >
                                    <template slot-scope="scope">
                                        <img
                                            :src="'https://www.zykhome.club/' + scope.row.imageUrl"
                                            alt
                                            style="width: 50px; height: 30px"
                                        />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="model" label="型号" width="100px;"></el-table-column>
                                <el-table-column label="数量" width="160">
                                    <template slot-scope="scope">
                                        <el-input-number
                                            size="mini"
                                            v-model="scope.row.number"
                                            :min="0"
                                            :max="10"
                                            label="描述文字"
                                        ></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="unit" label="单位" width="80px;"></el-table-column>
                                <el-table-column label="操作" width="100px;" fixed="right">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="danger"
                                            size="mini"
                                            plain
                                            icon="el-icon-remove"
                                            @click="removeItem(scope.row.id)"
                                            >移除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </span>
                    </el-drawer>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "Addstore",

    data() {
        var checkEmail = (Rule, value, callback) => {
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            if (!value) {
                return callback(new Error("邮箱不能为空"));
            }
            setTimeout(() => {
                if (mailReg.test(value)) {
                    callback();
                } else {
                    callback(new Error("请输入正确的邮箱格式"));
                }
            }, 100);
        };
        var checkPhone = (Rule, value, callback) => {
            const phoneReg = /^1[34578]\d{9}$$/;
            if (!value) {
                return callback(new Error("电话号码不能为空"));
            }
            setTimeout(() => {
                // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
                // 所以在前面加了一个+实现隐式转换

                if (!Number.isInteger(+value)) {
                    callback(new Error("请输入数字值"));
                } else {
                    if (phoneReg.test(value)) {
                        callback();
                    } else {
                        callback(new Error("电话号码格式不正确"));
                    }
                }
            }, 100);
        };
        return {
            supplierInfo: {
                name: "选择后显示具体信息",
                address: "选择后显示地址信息",
                contact: "选择后显示联系人信息",
                phone: "选择后显示联系方式",
                email: "选择后显示邮箱信息",
            }, //卡片展示
            addStoreForm: { type: 1 }, //入库表单数据
            existence: 0, //来源添加类型
            suppliers: [], //已存在物资来源

            provinceList: [], // 省列表
            cityList: [], // 市列表
            originList: [], // 区列表
            cityOptions: [], // 市下拉框数据
            originOptions: [], // 区下拉框数据,
            drawer: false, //显示右侧菜单栏
            itemNum: 0, //物资总类

            categorykeys: [], //查询分类
            selectProps: {
                expandTrigger: "hover",
                value: "id",
                label: "name",
                children: "children",
            }, //级联选择器配置项
            catetorys: [],
            queryMap: {
                pageNum: 1,
                pageSize: 6,
                status: 0,
            }, //查询集合
            tableData: [{ imageUrl: "", name: "图片" }], //入库预选表格
            total: 0,
            products: [{ imageUrl: "", name: "图片", model: "KEM-0155", number: "2" }],

            addRules: {
                supplierId: [{ required: true, message: "请选中物资来源", trigger: "blur" }],
                type: [{ required: true, message: "请选中入库类型", trigger: "blur" }],
                remark: [
                    { required: true, message: "请输入商品说明备注", trigger: "blur" },
                    { min: 5, max: 20, message: "长度在 5 到 20 个字符", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入来源名称", trigger: "blur" },
                    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
                ],
                address: [
                    { required: true, message: "请输入地址信息", trigger: "blur" },
                    { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" },
                ],
                email: [{ required: true, validator: checkEmail, trigger: "blur" }],
                valueProvince: [{ required: true, message: "请输入省份", trigger: "blur" }],
                valueCity: [{ required: true, message: "请输入城市", trigger: "blur" }],
                valueOrigin: [{ required: true, message: "请输入区县", trigger: "blur" }],
                sort: [{ required: true, message: "请输入排序号", trigger: "blur" }],
                contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
                phone: [
                    {
                        required: true,
                        message: "请输入联系方式",
                        validator: checkPhone,
                        trigger: "blur",
                    },
                ],
            }, //添加验证
        };
    },

    created() {
        this._getJsonData();
        this.getTableData();
        // this.getCatetorys();
        // this.getSuppliers();
    },

    methods: {
        // 选择来源添加方式
        existenceChange(existence) {
            this.existence = existence;
        },

        _getJsonData() {
            this.$http.get("/json/provinces.json").then((res) => {
                this.provinceList = [];
                this.cityList = [];
                this.originList = [];
                res.data.forEach((item) => {
                    if (item.value.match(/0000$/)) {
                        this.provinceList.push({
                            value: item.value,
                            label: item.name,
                            children: [],
                        });
                    } else if (item.value.match(/00$/)) {
                        this.cityList.push({
                            value: item.value,
                            label: item.name,
                            children: [],
                        });
                    } else {
                        this.originList.push({
                            value: item.value,
                            label: item.name,
                        });
                    }
                });
                for (let index in this.provinceList) {
                    for (let index1 in this.cityList) {
                        if (this.provinceList[index].value.slice(0, 2) === this.cityList[index1].value.slice(0, 2)) {
                            this.provinceList[index].children.push(this.cityList[index1]);
                        }
                    }
                }
                for (let item1 in this.cityList) {
                    for (let item2 in this.originList) {
                        if (this.originList[item2].value.slice(0, 4) === this.cityList[item1].value.slice(0, 4)) {
                            this.cityList[item1].children.push(this.originList[item2]);
                        }
                    }
                }
            });
        },

        // 选择省份
        changeProvince(val) {
            this.provinceList.forEach((province, index) => {
                if (val.toString() === this.provinceList[index].value) {
                    // this.cityOptions = this.provinceList[index].children;
                    this.addRuleForm.valueCity = this.provinceList[index].children[0].value; //设置市的值
                    this.addRuleForm.city = this.provinceList[index].children[0].label;

                    this.addRuleForm.valueOrigin = this.provinceList[index].children[0].children[0].value; //设置县的值
                    this.addRuleForm.origin = this.provinceList[index].children[0].children[0].label;

                    this.originOptions = this.provinceList[index].children[0].children;
                    //set value
                    this.addRuleForm.province = this.provinceList[index].label;
                }
            });
        },

        // 选择城市
        changeCity(val) {
            this.cityList.forEach((city, index) => {
                if (val.toString() === this.cityList[index].value) {
                    this.originOptions = this.cityList[index].children;
                    this.addRuleForm.valueOrigin = this.cityList[index].children[0].value; //设置县的值;
                    //set value
                    this.addRuleForm.city = this.cityList[index].label;
                }
            });
        },
        // 选择区
        changeOrigin(val) {
            this.addRuleForm.valueOrigin = val;

            this.originList.forEach((origin, index) => {
                if (val.toString() === this.originList[index].value) {
                    //set value
                    this.addRuleForm.origin = this.originList[index].label;
                }
            });
            //添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。
            this.$forceUpdate();
        },

        // 选择已知物资来源
        supplerSelectChange() {},

        // 立即创建按钮事件
        add() {
            this.drawer = true;
        },
        // 重置按钮事件
        reset() {
            this.addStoreForm = { type: 1 };
            this.$refs.addStoreFormRef.clearValidate();
            this.supplierInfo = {
                name: "选择后显示具体信息",
                address: "选择后显示地址信息",
                contact: "选择后显示联系人信息",
                phone: "选择后显示联系方式",
                email: "选择后显示邮箱信息",
            };
        },

        /*    右边卡片的方法     */

        // 获取右边表格物资数据
        async getTableData() {
            const { data: res } = await this.$http.get("product/findProducts", {
                params: this.queryMap,
            });
            if (res.code == 200) {
                this.tableData = res.data.rows;
                this.total = res.data.total;
            } else {
                return this.$message.error("获取商品列表失败");
            }
        },

        //  当选中节点变化时触发
        selectChange() {},

        // 搜索
        search() {},

        // 当选择项发生变化时会触发该事件
        handleSelectionChange() {},

        // 指定一个key标识这一行的数据
        getRowKey(row) {
            return row.id;
        },

        // 改变页码
        handleSizeChange(newSize) {
            this.queryMap.pageSize = newSize;
            this.getTableData();
        },

        // 点击分页
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            this.getTableData();
        },
        // 清空全部
        removeAllItem() {
            this.products.forEach((row) => {
                this.$refs.dataTable.toggleRowSelection(row, false);
            });
            this.products = [];
        },
    },
};
</script>

<style scoped></style>
